<template>
	<view class="video-contain">
		<!-- 自定义头部 -->
		<!-- <go-back /> -->
		<video :show-fullscreen-btn="false"  object-fit="contain" :autoplay="true"
		 :src="detailInfo.MediaUrl" style="width:100%;height: 100%;" @error="videoError" :id="detailInfo.id" />
		<!-- 右侧工具 -->
		<cover-view class="tools" v-if="lists.length">
			<cover-image src="https://img.kemanyun.com/qianhuituan/2019-09-20/69_1568963723_UXAJkemkT3.png" class="home-icon right-icon"
			 bindtap='goList'/>
		</cover-view>
	</view>
</template>

<script>
	// import goBack from "@/components/GoBack"
	export default {
		data() {
			return {
				detailInfo:{}
			}
		},
		components:{
			// goBack
		},
		methods: {
			async getVideoDetail(id){
				let query={
					id
				}
				let {data}=await this.$h.api.liveModel.getReplayDetail(query)
				this.detailInfo=data
			},
			videoError(err){
				console.log(err)
			}
		},
		onLoad({id}) {
			this.getVideoDetail(id)
		}
	}
</script>

<style>
	/* pages/Main/myVideo/index.wxss */
	page {
		width: 100%;
		height: 100%;
	}

	.video-contain {
		width: 100%;
		height: 100%;
	}

	swiper {
		height: 100%;
		width: 100%;
	}

	swiper video {
		width: 100%;
		height: 100%;
	}

	.touch-cover {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 9;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background-image: url('https://img.kemanyun.com/qianhuituan/2019-09-20/69_1568967223_obtnfpoWy3.png');
		background-size: 100% 100%;
	}

	.nav-myself {
		position: fixed;
		top: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		z-index: 999;
	}

	.title-content {
		display: flex;
		flex: 1;
		align-items: center;
	}

	.title {
		display: inline-block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.back {
		position: absolute;
		left: 30rpx;
		width: 19rpx;
		height: 32rpx;
	}

	.back image {
		width: 100%;
		height: 100%;
	}

	.tools {
		position: fixed;
		right: 5rpx;
		top: 500rpx;
		display: flex;
		flex-direction: column;
		width: 125rpx;
		z-index: 9999;
	}

	.share-icon {
		width: 73rpx;
		height: 70rpx;
		/* background-image: url(https://img.kemanyun.com/qianhuituan/2019-09-20/69_1568963641_Fkf2m79fFb.png);
	  background-size: 100% 100%; */
	}

	.right-icon {
		margin: 20rpx 20rpx 28rpx 0;
	}

	.home-icon {
		width: 75rpx;
		height: 75rpx;
		/* background-image: url(https://img.kemanyun.com/qianhuituan/2019-09-20/69_1568963723_UXAJkemkT3.png);
	  background-size: 100% 100%; */
	}

	.like-icon {
		width: 74rpx;
		height: 64rpx;
	}

	.text {
		color: white;
		width: 100rpx;
		text-align: center;
		margin: 0rpx 20rpx;
	}

	.share-button {
		background-color: transparent !important;
		margin: 20rpx 20rpx 28rpx 0;
		padding: 0 !important;
	}

	.video-goods {
		width: 578rpx;
		height: 186rpx;
		border-radius: 8rpx;
		background: #fff;
		position: fixed;
		bottom: 50rpx;
		left: 20rpx;
		padding: 0 15rpx;
		display: flex;
		align-items: center;
		z-index: 9999;
	}

	.video-goods cover-image {
		height: 156rpx;
		width: 156rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.goods-right {
		font-size: 28rpx;
		color: #1a1a1a;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
		height: 156rpx;
	}

	.goods-price {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.price {
		flex: 1;
	}

	.goBuy {
		height: 52rpx;
		padding: 0 30rpx;
		border-radius: 26rpx;
		color: #fff;
		font-size: 24rpx;
		line-height: 52rpx;
		display: inline-block;
	}

	.buy-info {
		position: fixed;
		bottom: 280rpx;
		left: 20rpx;
		min-width: 320rpx;
		z-index: 9999;
	}

	.buy-info .item-li {
		height: 68rpx;
		padding: 0 10rpx;
		border-radius: 34rpx;
		background-color: rgba(0, 0, 0, .4);
		color: #fff;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.buy-info .item-li image {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.play-btn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: 128rpx;
		width: 128rpx;
		/* background-image: url(https://img.kemanyun.com/qianhuituan/2019-10-11/69_1570790815_yUO3cyjQTB.png);
	  background-size: 100% 100%; */
		z-index: 200;
	}

	.market-price {
		color: #ccc;
		margin-top: 5rpx;
		flex: 1;
		width: 100%;
	}

	.market-box {
		position: relative;
		display: inline-block;
		font-size: 28rpx;
	}

	.line {
		width: 100%;
		position: absolute;
		height: 1px;
		background-color: #ccc;
		top: 16rpx;
	}

	.hidden-box {
		width: 2rpx;
		background: #fff;
		color: #fff;
		display: inline-block;
		height: 100%;
		vertical-align: middle;
		overflow: hidden;
	}
</style>
